<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/html/static/ajax/libs/bootstrap/bootstrap.css?v3.3.7">
    <link rel="stylesheet" href="/html/static/ajax/libs/css/style.css">
    <link rel="stylesheet" href="/html/static/ajax/libs/css/font-awesome.min.css?v=4.7.0">
    <link rel="stylesheet" href="/html/static/ajax/libs/layui/css/layui.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker1'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class='col-sm-6'>
                <div class="form-group">
                    <div class='input-group date' id='datetimepicker2'>
                        <input type='text' class="form-control" />
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-calendar"></span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="gray-bg">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-sm-6 datetimepickersss">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>日期选择器 <small>https://github.com/smalot/bootstrap-datetimepicker</small></h5>
                        </div>
                        <div class="ibox-content">
                            <div class="form-group">
                                <label class="font-noraml">简单示例</label>
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="form-control" id="datetimepicker-demo-1"
                                        placeholder="yyyy-MM-dd HH:mm">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="font-noraml">显示年月日</label>
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="form-control" id="datetimepicker-demo-2"
                                        placeholder="yyyy-MM-dd">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="font-noraml">显示年月日时分秒</label>
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="form-control" id="datetimepicker-demo-3"
                                        placeholder="yyyy-MM-dd HH:mm:ss">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="font-noraml">带清空的按钮</label>
                                <div class="input-group date form_date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input class="form-control" size="16" type="text" readonly>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-remove"></span>
                                    </span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="font-noraml">日期范围选择</label>
                                <div class="input-daterange input-group">
                                    <input type="text" class="input-sm form-control" id="datetimepicker-startTime"
                                        placeholder="yyyy-MM-dd" />
                                    <span class="input-group-addon">到</span>
                                    <input type="text" class="input-sm form-control" id="datetimepicker-endTime"
                                        placeholder="yyyy-MM-dd" />
                                </div>
                            </div>
                            <hr>
                            <div class="form-group">
                                <label class="font-noraml">相关参数详细信息</label>
                                <div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-datetimepicker"
                                        target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#bootstrap-datetimepicker</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 laydatesss">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>日期选择器 <small>https://github.com/sentsin/laydate</small></h5>
                        </div>
                        <div class="ibox-content">
                            <div class="form-group">
                                <label class="font-noraml">简单示例</label>
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="form-control" id="laydate-demo-1"
                                        placeholder="yyyy-MM-dd">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="font-noraml">显示年月日</label>
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="form-control" id="laydate-demo-2"
                                        placeholder="yyyy-MM-dd">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="font-noraml">显示年月日时分秒</label>
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="form-control" id="laydate-demo-3"
                                        placeholder="yyyy-MM-dd HH:mm:ss">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="font-noraml">单框范围选择</label>
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="form-control" id="laydate-demo-4"
                                        placeholder="yyyy-MM-dd - yyyy-MM-dd">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="font-noraml">日期范围选择</label>
                                <div class="input-daterange input-group">
                                    <input type="text" class="input-sm form-control" id="laydate-startTime"
                                        placeholder="yyyy-MM-dd" />
                                    <span class="input-group-addon">到</span>
                                    <input type="text" class="input-sm form-control" id="laydate-endTime"
                                        placeholder="yyyy-MM-dd" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="font-noraml">年</label>
                                <div class="input-daterange input-group">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="input-sm form-control" id="laydate-year"
                                        placeholder="yyyy" />
                                </div>
                                <label class="font-noraml">年月</label>
                                <div class="input-daterange input-group">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="input-sm form-control" id="laydate-year-month"
                                        placeholder="yyyy-MM" />
                                </div>
                                <label class="font-noraml">时间</label>
                                <div class="input-daterange input-group">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="input-sm form-control" id="laydate-time"
                                        placeholder="HH:mm:ss" />
                                </div>
                                <label class="font-noraml">日期时间</label>
                                <div class="input-daterange input-group">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input type="text" class="input-sm form-control" id="laydate-datetime"
                                        placeholder="yyyy-MM-dd HH:mm:ss" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="" class="font-noraml">左右面板联动选择</label>
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">日期范围</label>
                                        <div class="layui-inline" id="ID-laydate-rangeLinked">
                                            <div class="layui-input-inline">
                                                <input type="text" autocomplete="off" id="ID-laydate-start-date-1"
                                                    class="layui-input" placeholder="开始日期">
                                            </div>
                                            <div class="layui-form-mid">-</div>
                                            <div class="layui-input-inline">
                                                <input type="text" autocomplete="off" id="ID-laydate-end-date-1"
                                                    class="layui-input" placeholder="结束日期">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <hr>
                            <div class=" form-group">
                                <label class="font-noraml">相关参数详细信息</label>
                                <div><a href="http://doc.ruoyi.vip/ruoyi/document/zjwd.html#laydate"
                                        target="_blank">http://doc.ruoyi.vip/ruoyi/document/zjwd.html#laydate</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/html/static/ajax/libs/jquery/jquery.js"></script>
    <script src="/html/static/ajax/libs/bootstrap/bootstrap.js"></script>
    <link rel="stylesheet" href="/html/static/ajax/libs/datetimepicker/bootstrap-datetimepicker.css">
    <script type="text/javascript" src="/html/static/ajax/libs/datetimepicker/bootstrap-datetimepicker.js"></script>

    <script src="/html/static/ajax/libs/layui/layui.js?v2.8.18"></script>
    <script src="/html/static/ajax/libs/laydate/laydate.js"></script>"></script>

    <script type="text/javascript">
        $(function () {
            $('#datetimepicker1').datetimepicker();
            <!-- datetimepicker示例 -->
            $("#datetimepicker-demo-1").datetimepicker();
            $("#datetimepicker-demo-2").datetimepicker({
                format: 'yyyy-mm-dd',
                minView: 'month',
                autoclose: true
            });
            $("#datetimepicker-demo-3").datetimepicker({
                format: "yyyy-mm-dd hh:ii:ss",
                autoclose: true
            });

            $('.form_date').datetimepicker({
                format: "yyyy-mm-dd",
                minView: "month",
                autoclose: true
            });
            $("#datetimepicker-startTime").datetimepicker({
                format: 'yyyy-mm-dd',
                minView: "month",
                clearBtn: false,
                // todayBtn: true,
                autoclose: true,
                // startView: 'day',
                // startView: 'hour',
                // startView: 'month',
                // startView: 'year',
                // startView: 'decade',
                // startDate: new Date(2024, 11, 1),
                endDate: new Date(),
                initialDate: new Date('2024-11-1'),
            }).on('changeDate', function (event) {
                event.preventDefault();
                event.stopPropagation();
                var startTime = event.date;
                $('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
            });
            $("#datetimepicker-endTime").datetimepicker({
                format: 'yyyy-mm-dd',
                minView: "month",
                todayBtn: true,
                autoclose: true,
                endDate: new Date(),
            }).on('changeDate', function (event) {
                event.preventDefault();
                event.stopPropagation();
                var endTime = event.date;
                $("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
            });

            // laydate示例
            layui.use('laydate', function () {
                var laydate = layui.laydate;

                laydate.render({
                    elem: '#laydate-demo-1',
                    lang: 'zh-cn',// en
                });
                laydate.render({
                    elem: '#laydate-demo-2',
                    type: 'date'
                });
                laydate.render({
                    elem: '#laydate-demo-3',
                    type: 'datetime',
                    trigger: 'click'
                });
                laydate.render({
                    elem: '#laydate-demo-4',
                    range: true
                });
                var startDate = laydate.render({
                    elem: '#laydate-startTime',
                    max: $('#laydate-endTime').val(),
                    theme: 'molv',
                    // theme: 'grid',
                    trigger: 'click',
                    done: function (value, date) {
                        // 结束时间大于开始时间
                        if (value !== '') {
                            endDate.config.min.year = date.year;
                            endDate.config.min.month = date.month - 1;
                            endDate.config.min.date = date.date;
                        } else {
                            endDate.config.min.year = '';
                            endDate.config.min.month = '';
                            endDate.config.min.date = '';
                        }
                    }
                });
                var endDate = laydate.render({
                    elem: '#laydate-endTime',
                    min: $('#laydate-startTime').val(),
                    theme: 'molv',
                    trigger: 'click',
                    done: function (value, date) {
                        // 开始时间小于结束时间
                        if (value !== '') {
                            startDate.config.max.year = date.year;
                            startDate.config.max.month = date.month - 1;
                            startDate.config.max.date = date.date;
                        } else {
                            startDate.config.max.year = '';
                            startDate.config.max.month = '';
                            startDate.config.max.date = '';
                        }
                    }
                });
                laydate.render({
                    elem: '#laydate-year',
                    type: 'year',
                });
                laydate.render({
                    elem: '#laydate-year-month',
                    type: 'month',
                });
                laydate.render({
                    elem: '#laydate-time',
                    type: 'time',
                });
                laydate.render({
                    elem: '#laydate-datetime',
                    type: 'datetime',
                });
                // 日期范围 - 左右面板联动选择模式
                laydate.render({
                    elem: '#ID-laydate-rangeLinked',
                    range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
                    rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
                });
            });
        });
    </script>
</body>

</html>